---
import BaseHead from "../components/BaseHead.astro";
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
import SideBar from "../components/SideBar.astro";

import { SITE_TITLE, SITE_DESCRIPTION } from "../config";

const { image, title = SITE_TITLE, description = SITE_DESCRIPTION, includeSidebar = true, sideBarActiveItemID } = Astro.props;
---

<!DOCTYPE html>
<html lang="en" data-theme="lofi">
  <head>
    <BaseHead title={title} description={description} image={image} />
  </head>
  <body>
    <div class="bg-base-100 drawer lg:drawer-open">
      <input id="my-drawer" type="checkbox" class="drawer-toggle" />
      <div class="drawer-content bg-base-100">
        <Header title={SITE_TITLE} />
        <div class="md:flex md:justify-center">
          <main class="p-6 pt-10 lg:max-w-[900px] max-w-[100vw]">
            <slot />
          </main>
        </div>
        <Footer />
      </div>
      {includeSidebar && <SideBar sideBarActiveItemID={sideBarActiveItemID} />}
    </div>
  </body>
</html>
